// 源插件
import React, { Fragment, PureComponent } from 'react';
import { DateDiff, DateStamp, FormatnumberZero, Mover, NumberDivide } from '@/function.js';
// 视图插件
import { Button, Card, Divider, Form, message, Modal, notification } from 'antd';
// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTablePro from '@/components/UpgradeStandardTable/StandardTablePro';
import { connect } from 'dva';
import AddCitiOption from './AddCitiOption';

// css OR less预编译器

// 图片

/**
 *  Describe:数据连接
 */

@connect(({ cpb, loading }) => ({
  cpb,
  loading: loading.models.cpbRule,
}))
@Form.create()
class CitiOption extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    dataSource: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourcePreview: {
      data: [],
      total: [],
      code: 0,
    },
    row: {},
    addVisible: false,
    addCitiVisible: false,
    confirmLoading: false,
  };

  dataSourceChange() {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'cpb/GetOptionListCPB',
      callback: res => {
        that.setState({
          dataSource: {
            title: `花旗期权 ${res.data[0].date.split(' ')[0]}`,
            code: 1,
            data: res.data,
            total: ['profit', 'todayProfit', 'positionSize'],
            columns: [
              {
                title: '期权代码',
                dataIndex: 'optionCode',
                type: 'string',
                width: 120,
                search: true,
              },
              {
                title: '期权类型',
                dataIndex: 'optionType',
                type: 'number',
                filters: [
                  // 1sp 2 sc 3 bp 4bc
                  {
                    text: 'SP',
                    value: 1,
                  },
                  {
                    text: 'SC',
                    value: 2,
                  },
                  {
                    text: 'BP',
                    value: 3,
                  },
                  {
                    text: 'BC',
                    value: 4,
                  },
                ],
                render: (value, row, index) => {
                  return (
                    <span>
                      {value === 1
                        ? 'SP'
                        : value === 2
                        ? 'SC'
                        : value === 3
                        ? 'BP'
                        : value === 4
                        ? 'BC'
                        : null}
                    </span>
                  );
                },
              },
              {
                title: '昨收价',
                dataIndex: 'lastClose',
                type: 'number',
                sorter: true,
              },
              {
                title: '收盘价',
                dataIndex: 'close',
                type: 'number',
                sorter: true,
              },
              {
                title: '购买日期',
                dataIndex: 'buyDate',
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '总收益',
                dataIndex: 'profit',
                type: 'number',
                sorter: true,
              },
              {
                title: '今日收益',
                dataIndex: 'todayProfit',
                type: 'number',
                sorter: true,
              },
              {
                title: '权利金',
                dataIndex: 'premium',
                type: 'number',
                sorter: true,
              },
              {
                title: '期权数量',
                dataIndex: 'optionCount',
                type: 'number',
                sorter: true,
              },
              {
                title: '敞口',
                dataIndex: 'positionSize',
                type: 'number',
                sorter: true,
              },
            ],
          },
        });
      },
    });
  }

  openAddVisible() {
    const that = this;
    const { dispatch } = this.props;
    dispatch({
      type: 'cpb/GetOptionListPreviewCPB',
      callback: res => {
        that.setState({
          addVisible: true,
          dataSourcePreview: {
            title: '今日交易记录',
            code: 1,
            data: res.data.tradeList,
            total: [],
            columns: [
              {
                title: '期权代码',
                dataIndex: 'optionCode',
                type: 'string',
                search: true,
              },
              {
                title: '期权类型',
                dataIndex: 'optionType',
                type: 'number',
                filters: [
                  // 1sp 2 sc 3 bp 4bc
                  {
                    text: 'SP',
                    value: 1,
                  },
                  {
                    text: 'SC',
                    value: 2,
                  },
                  {
                    text: 'BP',
                    value: 3,
                  },
                  {
                    text: 'BC',
                    value: 4,
                  },
                ],
                render: (value, row, index) => {
                  return (
                    <span>
                      {value === 1
                        ? 'SP'
                        : value === 2
                        ? 'SC'
                        : value === 3
                        ? 'BP'
                        : value === 4
                        ? 'BC'
                        : null}
                    </span>
                  );
                },
              },
              {
                title: '成交价',
                dataIndex: 'premium',
                type: 'number',
                sorter: true,
              },
              {
                title: '期权数量',
                dataIndex: 'optionCount',
                type: 'number',
                sorter: true,
              },
              {
                title: '购买日期',
                dataIndex: 'buyDate',
                width: 120,
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
            ],
          },
        });
      },
    });
  }

  closeAddVisbile() {
    const that = this;
    this.setState({
      addVisible: false,
    });
  }

  closeOkVisbile() {
    const that = this;
    that.setState({
      confirmLoading: true,
    });
    return new Promise((resolve, reject) => {
      setTimeout(resolve, 800);
    })
      .then(() => {
        that.props.form.validateFields((err, values) => {
          if (!err) {
            const { dispatch } = that.props;
            dispatch({
              type: 'cpb/MakeOptionListCPB',
              callback: res => {
                that.setState(
                  {
                    addVisible: false,
                    confirmLoading: false,
                  },
                  () => {
                    that.dataSourceChange();
                  }
                );
              },
            });
          }
        });
      })
      .catch(() => console.log('Oops errors!'));
  }

  openAddCitiVisible() {
    this.setState({
      addCitiVisible: true,
    });
  }

  closeAddCitiVisbile() {
    const that = this;
    this.setState(
      {
        addCitiVisible: false,
      },
      () => {
        that.openAddVisible();
      }
    );
  }

  render() {
    const {
      addVisible,
      addCitiVisible,
      confirmLoading,
      row,
      dataSource,
      dataSourcePreview,
    } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          <Button onClick={this.openAddVisible.bind(this)} style={{ marginRight: 30 }}>
            预览与生成信息
          </Button>
          <br />
          <br />
          <StandardTablePro dataSource={dataSource} />
          <Modal
            destroyOnClose
            title="预览与生成信息"
            visible={addVisible}
            confirmLoading={confirmLoading}
            width="80%"
            centered
            onOk={this.closeOkVisbile.bind(this)}
            onCancel={this.closeAddVisbile.bind(this)}
          >
            <Button onClick={this.openAddCitiVisible.bind(this)}>添加</Button>
            <br />
            <br />
            <StandardTablePro dataSource={dataSourcePreview} />
          </Modal>
          <AddCitiOption
            closeVisbile={this.closeAddCitiVisbile.bind(this)}
            visible={addCitiVisible}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    this.dataSourceChange();
  }

  componentWillUnmount() {}
}

export default CitiOption;
